<template>
  <div>
    <van-nav-bar title="我的关注" @click-left="onClickLeft" left-arrow />
    <van-cell center is-link v-for="item in Tlist" :key="item.name">
      <div class="f-box">
        <!-- 头像 -->
        <van-image
          round
          width="50px"
          height="50px"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <!-- 关注名称 -->
        <div class="f-title">
          <p>{{ item.name }}</p>
          <span>{{ item.fans }}</span>
        </div>
      </div>
    </van-cell>
  </div>
</template>

<script>
import { get } from "@/utils/http";
export default {
  props: ["list"],
  // mounted() {
  //   console.log(this.list);
  //   console.log(this.$route.params.list);
  // },
  data() {
    return {
      Tlist: [],
    };
  },
  async mounted() {
    this.$nextTick(async function () {
      this.Tlist = this.$route.params.list.split(",").map(async (item) => {
        // console.log(get(`/session/detail/${item}`));
        let data = await get(`/teacher/${item}`);
        console.log(data);
        return {
          name: data.name,
          fans: data.fans,
        };
      });
        console.log(this.Tlist)

      Promise.all(this.Tlist).then((arr) => {
        this.Tlist = arr;
        console.log(arr);
      });
    });
  },
  methods: {
    onClickLeft() {},
  },
};
</script>

<style lang="scss" scoped>
.van-nav-bar {
  height: 54px;
  line-height: 54px;
  .van-icon {
    color: #333333;
  }
}
.van-cell {
  width: 376px;
  height: 80px;
  .f-box {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 5px;
    .f-title {
      margin-left: 10px;
      p {
        margin: 0 0;
        font-weight: 500;
      }
      span {
        color: #999999;
        font-size: 12px;
      }
    }
  }
}
</style>